@habSpace-color: @blue-7;
@metal-color: @red-8;
@energy-color: @yellow-8;
@alloy-color: @purple-8;
@science-color: @cyan-7;
@production-color: @orange-7;
@search-color: @green-7;
@component-color: @magenta-7;
@nuke-color: @volcano-8;

@habSpace-color-alt: @blue-5;
@metal-color-alt: @red-4;
@energy-color-alt: @yellow-5;
@alloy-color-alt: @purple-4;
@science-color-alt: @cyan-5;
@production-color-alt: @orange-5;
@search-color-alt: @green-5;
@component-color-alt: @magenta-5;
@nuke-color-alt: @volcano-5;

@damage-color: @orange-7;
@armour-damage-color: @green-7;
@shield-damage-color: @blue-7;
@explosion-color: @purple-7;
@cargo-color: @magenta-7;
@velocity-color: @geekblue-7;
@acceleration-color: @red-7;
@defence-damage-color: @lime-7;
@achievement-color: @gold-6;

.ant-notification-notice-with-icon .ant-notification-notice-description {
  margin-top: -4px;
}

.habSpace-color {
  color: @habSpace-color;
}
.metal-color {
  color: @metal-color;
}
.energy-color {
  color: @energy-color;
}
.alloy-color {
  color: @alloy-color;
}
.science-color {
  color: @science-color;
}
.production-color {
  color: @production-color;
}
.search-color {
  color: @search-color;
}
.component-color {
  color: @component-color;
}
.nuke-color {
  color: @nuke-color;
}
.achievement-color {
  color: @achievement-color;
}
.alt {
  .habSpace-color {
    color: @habSpace-color-alt;
  }
  .metal-color {
    color: @metal-color-alt;
  }
  .energy-color {
    color: @energy-color-alt;
  }
  .alloy-color {
    color: @alloy-color-alt;
  }
  .science-color {
    color: @science-color;
  }
  .production-color {
    color: @production-color-alt;
  }
  .search-color {
    color: @search-color-alt;
  }
  .component-color {
    color: @component-color-alt;
  }
  .nuke-color {
    color: @nuke-color-alt;
  }
}

.text-success {
  color: @success-color;
}
.text-info {
  color: @info-color;
}
.text-warning {
  color: @warning-color;
}
.text-danger {
  color: @error-color;
}
.text-secondary {
  color: @text-color-secondary;
}
.question-icon {
  color: @text-color-secondary;
}

.job-list {
  // background: @layout-header-background;
  background: @component-background;
}
.main-background {
  background: @component-background;
}

.bordered {
  border: 1px solid @border-color-base;
}
.progress {
  background-color: @progress-remaining-color;
  div {
    background-color: @progress-default-color;
  }
}
.dark-background {
  background: @layout-header-background;
}
.light-background {
  background: @component-background;
}

.damage-color {
  color: @damage-color;
}
.armour-damage-color {
  color: @armour-damage-color;
}
.shield-damage-color {
  color: @shield-damage-color;
}
.energy-color {
  color: @energy-color;
}
.explosion-color {
  color: @explosion-color;
}
.cargo-color {
  color: @cargo-color;
}
.velocity-color {
  color: @velocity-color;
}
.acceleration-color {
  color: @acceleration-color;
}
.defence-damage-color {
  color: @defence-damage-color;
}
.bg-error {
  background-color: @alert-error-bg-color;
}

// Scroll bars
::-webkit-scrollbar-thumb {
  background: fadeout(@text-color-secondary, 25%);
  border: 0px none fadeout(@text-color-secondary, 25%);
}
::-webkit-scrollbar-thumb:hover {
  background: @text-color-secondary;
}
::-webkit-scrollbar-thumb:active {
  background: @popover-bg;
}
div.dark-scroll::-webkit-scrollbar-thumb {
  background: fadeout(@text-color-secondary-dark, 25%);
  border: 0px none fadeout(@text-color-secondary-dark, 25%);
}
div.dark-scroll::-webkit-scrollbar-thumb:hover {
  background: @text-color-secondary;
}
div.dark-scroll::-webkit-scrollbar-thumb:active {
  background: @popover-bg;
}

::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none transparent;
  display: none;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
  display: none;
}
::-webkit-scrollbar-track:active {
  background: transparent;
  display: none;
}

.tree {
  // @tree-color: @border-color-split;
  @horizontal-gutter: 40px;
  @border-radius: 10px;
  @entry-min-height: 45px;
  @label-width: 200px;
  @label-height: 25px;
  @label-border-radius: 5px;

  //------- {{ Styles }} -------//

  *,
  *:before,
  *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  #wrapper {
    position: relative;
  }
  .branch {
    position: relative;
    margin-left: @horizontal-gutter + @label-width;
    &:before {
      content: "";
      width: @horizontal-gutter / 2;
      border-top: 1px solid @tree-color;
      position: absolute;
      left: -@horizontal-gutter;
      top: 50%;
      margin-top: 1px;
    }
  }
  .entry {
    position: relative;
    min-height: @entry-min-height;
    &:before {
      content: "";
      height: 100%;
      border-left: 1px solid @tree-color;
      position: absolute;
      left: -(@horizontal-gutter / 2);
    }
    &:after {
      content: "";
      width: @horizontal-gutter / 2;
      border-top: 1px solid @tree-color;
      position: absolute;
      left: -(@horizontal-gutter / 2);
      top: 50%;
      margin-top: 1px;
    }
    &:first-child {
      &:before {
        width: @border-radius;
        height: 50%;
        top: 50%;
        margin-top: 2px;
        border-radius: @border-radius 0 0 0;
      }
      &:after {
        height: @border-radius;
        border-radius: @border-radius 0 0 0;
      }
    }
    &:last-child {
      &:before {
        width: @border-radius;
        height: 50%;
        border-radius: 0 0 0 @border-radius;
      }
      &:after {
        height: @border-radius;
        border-top: none;
        border-bottom: 1px solid @tree-color;
        border-radius: 0 0 0 @border-radius;
        margin-top: -@border-radius + 1px;
      }
    }
    &.sole {
      &:before {
        display: none;
      }
      &:after {
        width: @horizontal-gutter / 2;
        height: 0;
        margin-top: 1px;
        border-radius: 0;
      }
    }
  }
  .label {
    font-weight: 600;
    display: block;
    min-width: @label-width;
    padding: 5px 10px;
    line-height: @label-height - 5px * 2;
    text-align: center;
    border: 1px solid @tree-color;
    border-radius: @label-border-radius;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -(@label-height / 2);
  }
}
.menu-light {
  background-color: @menu-bg;
}
.menu-dark {
  background-color: @menu-dark-bg;
  a {
    color: @menu-dark-color !important;
  }
}
